<template>
  <div class="doubler">
    <div id="number" class="number"></div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
    name: "DigitalFlop",
    data() {
        return {

        }
    },
    beforeCreate() {
    },
    mounted() {
        // 初始化
        this.init();
        // 3秒中刷新一次
        /* setInterval(this.init, 3000); */
        console.log(this.formatNumber(55464.26))
    },
    methods: {
        init() {
            var numStr = this.formatNumber(parseInt(Math.random() * 100000)) + '';
            var html = "";
            for (var i = 0; i < numStr.length; i++) {
                /* var len = numStr.length - i; */
                html += "<span class=\"li\" >" + numStr[i] + "</span>";
            }
            html += "<span class=\"describe\">人次</span>";
            $("#number").html(html);
        },
        formatNumber(num) { 
          if (isNaN(num)) { 
            throw new TypeError("num is not a number"); 
          } 
          
          return ("" + num).replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,");  
        } 
    }
}
</script>

<style lang="scss">
.doubler {
    border: 1px solid #cdcdcd;
}
.number {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .li {
      font-size: 60px;
        color: #000;
    }
    .comma {
        color: #000;
    }
    .describe {
        color: #000;
        
    }
}

</style>